<template name="components">
	<view>
		<view class="fixed">
			<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
				<block slot="backText">关闭</block>
				<block slot="content" >{{roominfo.name}}--{{roominfo.title}}</block>
			</cu-custom>
		</view>
		<view class="">
			<live-pusher v-if="pushUrl" style="width: 750rpx;height: 100vh;"  id='livePusher' ref="livePusher" class="livePusher" :url="pushUrl"
			        mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="9" whiteness="2"
			        aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
			        ></live-pusher>
		</view>
		
		<view class="control_bar ">
			<view class="text-right padding-right">
				<view class="" v-if="menushow">
					<view class="">
						<button class="cu-btn  sm bg-gradual-green margin-bottom" @click="start">开始推流</button>
					</view>
					<view class="">
						<button class="cu-btn  sm bg-gradual-green margin-bottom" @click="pause">暂停推流</button>
					</view>
					<view class="">
						<button class="cu-btn  sm bg-gradual-green margin-bottom" @click="resume">resume</button>
					</view>
					<view class="">
						<button class="cu-btn  sm bg-gradual-green margin-bottom" @click="stop">停止推流</button>
					</view>
					<view class="">
						<button class="cu-btn sm bg-gradual-green margin-bottom" @click="snapshot">快照</button>
					</view>
					<view class="">
						<button class="cu-btn sm bg-gradual-green margin-bottom" @click="startPreview">开启摄像头预览</button>
					</view>
					<view class="">
						<button class="cu-btn sm bg-gradual-green margin-bottom" @click="stopPreview">关闭摄像头预览</button>
					</view>
					<view class="">
						<button class="cu-btn sm bg-gradual-green margin-bottom" @click="switchCamera">切换摄像头</button>
					</view>
					
				</view>
				
				<view>
					<button class="cu-btn sm bg-gradual-green margin-bottom" @tap="menuchange">{{menushow?'收起':'展开'}}功能菜单</button>
				</view>
			</view>
			
			
			
			<view class="console_box">
				<scroll-view scroll-y="true" style="height: 300rpx;" :scroll-top="topnum">
					<view class="" v-for="(item,index) in list " :key="index">
						{{item.code}}:{{item.msg}}
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';
	export default {
		name: "components",
		computed: {
			...mapState(['userinfo','config'])
		},
		data() {
			return {
				menushow:false,
				pushUrl:false,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				topnum:300,
				roominfo:false,
				list: [
					{
						msg:'初始化',
						code:'000'
					}
				]
			};
		},
		created() {
			this.context = uni.createLivePusherContext("livePusher", this);
		},
		onLoad(e) {
			if(e.query){
				var userinfo = uni.getStorageSync('userinfo');
				this.roominfo = JSON.parse(decodeURIComponent(e.query))
				this.pushUrl = this.roominfo.pushurl+'?token='+userinfo.token
			}
		},
		methods: {
			menuchange(){
				this.menushow = !this.menushow
			},
			scrollbtm(){
				this.topnum = this.topnum+10
			},
			joinmsg(code,msg){
				this.list.push({code,msg})
				this.scrollbtm()
			},
			statechange(e) {
				console.log("statechange:" + JSON.stringify(e));
				this.joinmsg(e.detail.code,e.detail.message)
			},
			netstatus(e) {
				console.log("netstatus:" + JSON.stringify(e));
				// this.joinmsg(e.detail.code,e.detail.message)
			},
			error(e) {
				console.log("error:" + JSON.stringify(e));
				this.joinmsg(e.detail.code,e.detail.message)
			},
			start: function() {
				this.context.start({
					success: (a) => {
						console.log("livePusher.start:" + JSON.stringify(a));
					}
				});
			},
			close: function() {
				this.context.close({
					success: (a) => {
						console.log("livePusher.close:" + JSON.stringify(a));
					}
				});
			},
			snapshot: function() {
				this.context.snapshot({
					success: (e) => {
						console.log(JSON.stringify(e));
					}
				});
			},
			resume: function() {
				this.context.resume({
					success: (a) => {
						console.log("livePusher.resume:" + JSON.stringify(a));
					}
				});
			},
			pause: function() {
				this.context.pause({
					success: (a) => {
						console.log("livePusher.pause:" + JSON.stringify(a));
					}
				});
			},
			stop: function() {
				this.context.stop({
					success: (a) => {
						console.log(JSON.stringify(a));
					}
				});
			},
			switchCamera: function() {
				this.context.switchCamera({
					success: (a) => {
						console.log("livePusher.switchCamera:" + JSON.stringify(a));
					}
				});
			},
			startPreview: function() {
				this.context.startPreview({
					success: (a) => {
						console.log("livePusher.startPreview:" + JSON.stringify(a));
					}
				});
			},
			stopPreview: function() {
				this.context.stopPreview({
					success: (a) => {
						console.log("livePusher.stopPreview:" + JSON.stringify(a));
					}
				});
			}
		},
	}
</script>

<style>
	page {
		height: 100vh;
	}
	.fixed {
		position: fixed;
		z-index: 99;
	}
	.console_box{
		width: 100%;
		height: 300rpx;
		margin: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0.4);
		color: #00FF02;
	}
	.control_bar{
		width: 100%;
		position: absolute;
		z-index: 9;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
